<template>
	<view>
		<view class="day">
			<image src="../../static/likes.png" @click="goOne" mode="aspectFill"></image>
			<view class="wenzi ">
				<text>关注</text>
				<text>发现</text>
				<text>附近</text>
			</view>
			<image @click="goTwo" src="../../static/搜索.png" mode=""></image>
		</view>
		<view class="box">
			<text class="wen">推荐</text>
			<text>视频</text>
			<text>直播</text>
			<text>头像</text>
			<text>好物</text>
			<text>学习</text>
			<image @click="getDian()" src="../../static/向下.png" mode=""></image>
		</view>
		<view class="tuijian" v-if="bool==true">
			<view class="pingdao">
				<text>我的频道</text>
			</view>
			<view class="ani" v-for="item in aniList">
				<div>{{item.title}}</div>
				<div>{{item.title1}}</div>
				<div>{{item.title2}}</div>
				<div>{{item.title3}}</div>
			</view>
			<view class="pingdao">
				<text>推荐频道</text>
			</view>
			<view class="ani" v-for="item in aniList1">
				<div>{{item.title}}</div>
				<div>{{item.title1}}</div>
				<div>{{item.title2}}</div>
				<div>{{item.title3}}</div>
			</view>
		</view>
		<!-- 瀑布流布局 -->
		<view class="box-aio">
			<view class="left">
				<view class="touxi" v-for="item in arrList" @click="goThree">
					<view class="tupian">
						<image :src="item.url"></image>
					</view>
					<view class="wenzi">
						<text>{{item.Text}}</text>
					</view>
					<view class="touxiang">
						<view class="tou-img">
							<image :src="item.url2"></image>
							<text>{{item.Text2}}</text>
						</view>
						<view class="bixin">
							<image :src="item.url3" v-if="item.srcArr===false"
								@click="item.srcArr=!item.srcArr;item.Num++"></image>
							<image :src="item.src4" v-if="item.srcArr===true"
								@click="item.srcArr=!item.srcArr;item.Num--"></image>
							<text>{{item.num}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="right">
				<view class="touxi-ao" v-for="item in ArrList">
					<view class="tupian-pian">
						<image :src="item.src"></image>
					</view>
					<view class="wenzi-zi">
						<text>{{item.Title}}</text>
					</view>
					<view class="xiangtou">
						<view class="img-xiang">
							<image :src="item.src2"></image>
							<text>{{item.Title2}}</text>
						</view>
						<view class="xinbi">
							<image :src="item.src3" v-if="item.srcArr===false"
								@click="item.srcArr=!item.srcArr;item.Num++"></image>
							<image :src="item.src4" v-if="item.srcArr===true"
								@click="item.srcArr=!item.srcArr;item.Num--"></image>
							<text>{{item.Num}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bool: false,
				aniList: [{
						title: '推荐',
						title1: '视频',
						title2: '直播',
						title3: '时尚',
					},
					{
						title: '彩妆',
						title1: '头像',
						title2: '影视',
						title3: '游戏',
					},
					{
						title: '美食',
						title1: '美甲',
						title2: '综艺',
						title3: '绘画',
					},
					{
						title: '明星',
						title1: '壁纸',
						title2: '手工',
						title3: '文化',
					},
					{
						title: '音乐',
						title1: '发型',
						title2: '情感',
						title3: '学习',
					}
				],
				aniList1: [{
						title: '+护肤',
						title1: '+舞蹈',
						title2: '+影视',
						title3: '+阅读',
					},
					{
						title: '+摄影',
						title1: '+潮鞋',
						title2: '+搞笑',
						title3: '+萌宠',
					},
					{
						title: '+校园',
						title1: '+婚礼',
						title2: '旅行',
						title3: '+母婴',
					},
					{
						title: '+健身',
						title1: '+个护',
						title2: '+汽车',
						title3: '+体育',
					},
				],
				arrList: [{
						srcArr: false,
						url: '/static/a1.png',
						Text: '秋冬复古电影感滤镜 . 一些回忆片段',
						url2: '/static/w6.png',
						Text2: '小瑶',
						url3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						num: '6873'
					},
					{
						srcArr: false,
						url: '/static/o1.jpg',
						Text: 'ROMANTIC | 浪漫红玫+复古卡布',
						url2: '/static/mm.png',
						Text2: 'ROMANTIC ',
						url3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						num: '299'
					},
					{
						srcArr: false,
						url: '/static/o2.jpg',
						Text: '卡布奇洛玫瑰 | 巧克力泡泡 | 复古花束',
						url2: '/static/w8.png',
						Text2: 'FLOWER花样',
						url3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						num: '234'
					},
					{
						srcArr: false,
						url: '/static/o6.jpg',
						Text: 'No.48不用画线稿的简笔素材种郁金香',
						url2: '/static/w8.png',
						Text2: '嘻哈哈',
						url3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						num: '1657'
					},
					{
						srcArr: false,
						url: '/static/o7.jpg',
						Text: '简约线条美甲 | ins同款性冷淡极简风格',
						url2: '/static/w.png',
						Text2: '美甲日记',
						url3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						num: '4247'
					}
				],
				ArrList: [{
						srcArr: false,
						src: '/static/o10.jpg',
						Title: '啊啊这组情头气氛感我get了',
						src2: '/static/w7.png',
						Title2: 'Sunflower',
						src3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						Num: '42'
					},
					{
						srcArr: false,
						src: '/static/o4.jpg',
						Title: '玫瑰过程图',
						src2: '/static/w9.png',
						Title2: '故渊',
						src3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						Num: '673'
					},
					{
						srcArr: false,
						src: '/static/o5.jpg',
						Title: '烫了个头发被问疯了!救命啊!中发一定要烫!!',
						src2: '/static/w12.png',
						Title2: '颜一妮',
						src3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						Num: '851'
					},
					{
						srcArr: false,
						src: '/static/o8.jpg',
						Title: 'NO.10鲸成都纹身 | 纹身手稿 | 水墨纹身',
						src2: '/static/w10.png',
						Title2: '释常',
						src3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						Num: '619'
					},
					{
						srcArr: false,
						src: '/static/o9.jpg',
						Title: '记鹿',
						src2: '/static/w11.png',
						Title2: '白鹿',
						src3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						Num: '65万'
					},

				]
			}
		},
		methods: {
			goOne() {
				uni.navigateTo({
					url: "../everyday/everyday"
				})
			},
			goTwo() {
				uni.navigateTo({
					url: "../search/search"
				})
			},
			goThree() {
				uni.navigateTo({
					url: "../set/set"
				})
			},
			getDian() {
				if (this.bool == false) {
					this.bool = true
				} else if (this.bool == true) {
					this.bool = false
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "index.scss"
</style>
<style>
	page {
		background-color: #ffffff;
	}
</style>
